<template>
  <div v-loading="isLoading > 0" class="page-container">
    <page-tools>
      <template #left>
        <!-- <span>总记录数: {{ total }} 条</span> -->
      </template>
      <template #right>
        <el-button type="primary" size="mini" @click="clickFullScreen">全屏</el-button>
      </template>
    </page-tools>

    <div class="goods-container">
      <!-- 已支付 -->
      <div class="paid-container">
        <h3>待接单</h3>
        <div ref="paid">
          <section v-for="item in orderListPaid" :key="item.id" :data-id="item.id" draggable="true">
            <p class="left">{{ item.get_goods_code }}</p>
            <p class="middle">
              <span
                v-for="goods in item.goods_list"
                :key="goods.id"
              >{{ goods.goods_name }} &nbsp;&nbsp;&nbsp;&nbsp; x{{ goods.num }}</span>
            </p>
            <p class="right" />
          </section>
        </div>
      </div>
      <!-- 已接单 -->
      <div class="receive-container">
        <h3>待制作</h3>
        <div ref="receive">
          <section
            v-for="item in orderListReceive"
            :key="item.id"
            :data-id="item.id"
            draggable="true"
          >
            <p class="left">{{ item.get_goods_code }}</p>
            <p class="middle">
              <span
                v-for="goods in item.goods_list"
                :key="goods.id"
              >{{ goods.goods_name }} &nbsp;&nbsp;&nbsp;&nbsp; x{{ goods.num }}</span>
            </p>
            <p class="right" />
          </section>
        </div>
      </div>
      <!-- 已制作完成 -->
      <div class="done-container">
        <h3>待取货</h3>
        <div ref="done">
          <section
            v-for="item in orderListDone"
            :key="item.id"
            :data-id="item.id"
            draggable="true"
            @dblclick="remove(item.id)"
          >
            <p class="left">{{ item.get_goods_code }}</p>
            <p class="middle">
              <span
                v-for="goods in item.goods_list"
                :key="goods.id"
              >{{ goods.goods_name }} &nbsp;&nbsp;&nbsp;&nbsp; x{{ goods.num }}</span>
            </p>
            <p class="right" />
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import { getOrderGoodsShow, updateOrderGoodsStatus } from '@/api/orderGoods'
let timer = null
let dragEl = null
let list = []
export default {
  name: 'OrderGoodsShow',
  components: {
  },
  data() {
    return {
      isLoading: 0,
      orderListPaid: [],
      orderListReceive: [],
      orderListDone: []
    }
  },
  created() {
    this.getOrderGoodsShow()
    timer = setInterval(() => {
      this.getOrderGoodsShow()
    }, 5000)
  },
  beforeDestroy() {
    clearInterval(timer)
  },
  mounted() {
    document.querySelector('.goods-container').addEventListener('dragstart', function(event) {
      dragEl = event.target
    })

    // 阻止默认行为
    document.querySelector('.goods-container').addEventListener('dragover', function(event) {
      event.preventDefault()
    })

    Array.from(document.querySelector('.goods-container').children).forEach(el => {
      el.addEventListener('drop', async(event) => {
        event.preventDefault()
        const id = Number.parseInt(dragEl.dataset?.id)
        if (!id) return
        let status
        switch (el.className) {
          case 'paid-container': status = 2; break
          case 'receive-container': status = 3; break
          case 'done-container': status = 4; break
          default: return
        }
        await updateOrderGoodsStatus({ id, status })
        const order = list.find(item => item.id === id)
        order.status = status
        this.handleOrderList()
      })
    })
  },
  methods: {
    async  remove(id) {
      await updateOrderGoodsStatus({ id, status: 5 })
      const order = list.find(item => item.id === id)
      order.status = 5
      this.handleOrderList()
    },
    clickFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.request(document.querySelector('.goods-container'))
    },
    handleOrderList() {
      this.orderListPaid = []
      this.orderListReceive = []
      this.orderListDone = []
      list.forEach(item => {
        switch (item.status) {
          case 2: this.orderListPaid.push(item); break
          case 3: this.orderListReceive.push(item); break
          case 4: this.orderListDone.push(item); break
        }
      })
    },
    async getOrderGoodsShow() {
      try {
        list = await getOrderGoodsShow(this.$route.query.shop_id)
        list.forEach(item => {
          item.goods_list = JSON.parse(item.goods_list_json)
        })
        this.handleOrderList()
      } catch (error) {
        alert('更新失败！请刷新页面')
        clearInterval(timer)
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.goods-container {
  user-select: none;
  margin-top: 15px;
  display: flex;
  height: 100vh;
  > div {
    width: 33.33%;
    flex: none;
    h3 {
      text-align: center;
      padding-bottom: 20px;
    }
    > div {
      padding: 15px;
    }
  }
  .paid-container {
    background-color: pink;
  }
  .receive-container {
    background-color: skyblue;
  }
  .done-container {
    background-color: green;
  }
}

section {
  cursor: pointer;
  margin-bottom: 10px;
  background: #fff;
  display: flex;
  min-height: 80px;
  .left {
    width: 100px;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
  }
  .middle {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    span {
      white-space: nowrap;
      font-size: 14px;
      margin: 5px;
      border: 1px solid #ddd;
      padding: 2px 5px;
      // border-radius: 5px;
      background: #f2f2f2;
    }
  }
}
</style>
